<template>
  <div class="sale3">


    <div class="guide">
      <img src="../../assets/sale/c1.png" alt="">
    </div>

    <div class="sure-detail">
      <div class="sure-detail-c">
        <div class="li">品牌：<span v-html="saleData.manufacturer_name"></span></div>
        <div class="li">品类：<span v-html="saleData.category_name"></span></div>
        <div class="li">成色：<span v-html="saleData.attribute_name"></span></div>
        <div class="li">心里预期售卖价格：<span v-html="saleData.price"></span></div>
      </div>
    </div>

    <div class="address">
      <div class="ad-box">
        <p>{{address}}</p>
        <!--<p>{{shangjia}}</p>-->
      </div>
      <div class="ad-box2">
        <p>{{shangjia}}</p>
      </div>
      <img src="../../assets/sale/c2.png" alt="">
    </div>

    <div class="agree-box">
      <span class="checked"></span>
      <span>我已阅读并同意女神有财《寄卖协议》</span>
    </div>
    <div class="next-btn">
      <mt-button type="danger" size="large" v-on:click="saveSale">下一步</mt-button>
    </div>
  </div>
</template>

<script>

  import { Toast } from 'mint-ui';
  export default {
    name: 'Sale',
    data () {
      return {
        saleData: {},
        address:'',
        shangjia:''
      }
    },
    mounted:function(){
      this.saleData = sessionStorage.getItem('saleData') && JSON.parse(sessionStorage.getItem('saleData'));
      this.getsjaddress();
    },
    components: {
    },
    methods: {
      showpopup(){
        this.popupVisible = true;
      },
      getsjaddress(){

        var ajaxData = this.saleData;
        var _this = this;
        $.ajax({
          type:'get',
          url: RouteMap.sjaddress,
          data: ajaxData,
          success:function(res){
            if(res.code == 200){

              _this.address = res.data.shipping_city + res.data.shipping_district + res.data.shipping_address_1;
//              _this.address = res.data.shipping_address_1;
//              console.log(res.data.shipping_city);
//              console.log(res.data.shipping_district);
//              console.log(res.data.shipping_address_1);
              _this.shangjia = '【'+res.data.shipping_firstname+'】';
            }
            else{
              //Toast(res.msg)
            }
          }
        })
      },
      gotoAddress(path){
        this.$router.push(path)
      },
      saveSale:function(){

        var ajaxData = this.saleData;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        var _this = this;
        $.ajax({
          type:'post',
          url: RouteMap.addconsignment,
          data: ajaxData,
          success:function(res){
            if(res.code == 200){

              Toast('添加成功');
              setTimeout(function(){
                _this.$router.push('/salesuccess?id='+res.data.product_id);
              },500)

            }
            else{
              //Toast(res.msg)
            }
          }
        })

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .sale3{
    margin-left: 1rem;
    margin-right: 0rem;
  }
  .guide{
    margin-top: 0.5rem;
    margin-right: 0.7rem;
  }
  .guide img{
    width: 100%;
  }
  .address{
    position: relative;
  }
  .ad-box{
    position: absolute;
    top:2.2rem;
    left: .6rem;
    color: #666;
    width:62%;
    line-height: .97rem;
    font-size: .52rem;
  }
  /*2017-12-10女神有财移动到 邮寄地址上面*/
  .ad-box2{
    position: absolute;
    top:1rem;
    left: 5.4rem;
    color: #666;

    line-height: .77rem;
    font-size: .52rem;
  }

  .address img{
    width: 100%;
  }
  .sure-detail{
    margin-top: 0.5rem;
    margin-bottom: .8rem;
    margin-right: 1.22rem;
    background: #ff7b80;
    color: #fff;
    font-size: 0.5rem;
  }
  .sure-detail-c{
    padding:0.4rem 0.2rem;
  }
  .sure-detail-c .li{ line-height: 1.2rem;}
  .next-btn{
    margin-right: 1.22rem;
    margin-top: 0.5rem;
  }
  .agree-box{
    font-size: 0.6rem;
    margin-top: 1rem;
    color: #808080;
  }
  .checked{
    background: url("../../assets/sale/check.png");
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    background-size: 100% 100%;

  }
  .agree-box span{
    display: inline-block;
    vertical-align: middle;
  }
</style>
